<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="css/default.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div class="page">

    <div class="panel">
        <div class="panel_visible">
            <!---------------注册表单------------->
            <div class="panel_content">
                <h1 class="panel_title">  注册 </h1>
                <form class="form">
                    <label class="form_label" for="username">用户名：</label>
                    <input class="form_input" type="text" id="username">
                    <br>
                    <span id="username_err" style="display: none">用户名已存在</span>
                    <label class="form_label" for="password">密码：</label>
                    <input class="form_input " type="password" id="password" name="password">
                    <label class="form_label" for="realname">真实姓名：</label>
                    <input class="form_input" type="text" id="realname" name="fullname">
                    <br>
                    用户类型：
                    <form>
                        <input id="pt" type="radio" name="sex" value="pt">学生
                        <input id="tc" type="radio" name="sex" value="tc">教师
                    </form>
                    <button id="register_btn" name="register" class="form_btn" type="button" value="Submit">注册</button>
                    <button class="form_toggle js-formToggle" type="button">-->登录</button>
                </form>
            </div>
            <!--------------------登录表单---------------------->
            <div class="panel_content panel_content-overlay js-panel_content ">
                <h1 class="panel_title">  登录 </h1>
                <form class="form">
                    <label class="form_label" for="usernameIn">用户名：</label>
                    <input class="form_input" type="text" id="usernameIn" name="usernameIn">
                    <label class="form_label" for="passwordIn">密码</label>
                    <input class="form_input " type="password" id="passwordIn" name="passwordIn">
                    <button id="login_btn" name="login_btn" class="form_btn" type="button" value="Submit">登录</button>
                    <button id="remove_btn" name="remove_btn" class="form_btn" type="button"value="Submit">注销账号</button>
                    <button class="form_toggle js-formToggle" type="button">-->注册</button>
                </form>
            </div>
        </div>
        <div class="panel_back js-imageAnimate">
            <img class="panel_img" src="img\login.jpg" style="width: 235px;height: 457px"/>
        </div>
    </div>
</div>
<script src="js/main.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    user = {
        "userName" : "",
        "passWord" : "",
        "realName" : "",
        "role" : ""
    };
    removeUser = {
        "userName" : "",
        "passWord" : "",
        "realName" : "",
        "role" : ""
    }
    // ----------------------注册------------------------------
    // 检测用户填写的用户名是否存在
    document.getElementById("username").onblur = function (){
        var _this = this;
        // 获取用户名
        user.userName = this.value
        // 发送ajax请求，进行判断
        axios({
            method:"post",
            url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/login_check_Servlet",
            // url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/login_check_Servlet",
            data:user
        }).then(function (resp) {
            if(resp.data == "yes"){
                // 用户已存在
                document.getElementById("username_err").style.display = '';
                // 清空user
                user.userName = "";
                user.passWord = "";
            }else if(resp.data == "no"){
                document.getElementById("username_err").style.display = 'none';
            }
        })
    }
    // 注册提交
    document.getElementById("register_btn").onclick = function (){
        // 判断输入是否为空
        var input_password = document.getElementById("password").value + "";
        var input_realname = document.getElementById("realname").value + "";
        var userType1 = document.getElementById("pt").checked;
        var userType2 = document.getElementById("tc").checked;
        console.log(userType1);
        console.log(userType2);
        if("" == user.userName || "" == input_realname || (false == userType1 && false == userType2)){
            // 输入错误弹出提示信息
            alert("输入有误！")
        }else {
            user.passWord = input_password;
            user.realName = input_realname;
            if(userType1 == true){
                user.role = 0;
            }else {
                user.role = 1;
            }
                // 发送数据到servlet存入数据库
                axios({
                    method:"post",
                    url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/registerServlet",
                    // url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/registerServlet",
                    data:user
                }).then(function (resp) {
                    if(resp.data == "yes"){
                        user.userName = '';
                        user.passWord = '';
                        user.realName = '';
                        user.role = '';
                        window.location.replace(location.href); //刷新当前页面.()
                        alert("注册成功  请去登录")
                    }else {
                        alert("注册失败！")
                    }
                })
            }
    }
    // -------------------------------------登錄------------
    document.getElementById("login_btn").onclick = function (){
        // 获取用户输入
        var input_userName = document.getElementById("usernameIn").value + "";
        var input_passWord = document.getElementById("passwordIn").value + "";

        if("" == input_userName || "" == input_passWord){
            // 输入错误弹出提示信息
            alert("输入有误！")
        }else {
            // 绑定user
            user.userName = input_userName;
            user.passWord = input_passWord;

            // 进行登录
            var _this = this;
            axios({
                // url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/loginServlet",
                url:"http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/loginServlet",
                method:"post",
                data:user
            }).then(function (resp) {
                var signal = resp.data;
                    // 登录成功 跳转到首页
                    if(signal == 0){
                        // 学生页面
                        window.location.href="student_home.html?valus=" + user.userName;
                    }else if(signal == 1){
                        // 教师页面
                        window.location.href="teacher_home.html?valus=" + user.userName;
                    }else {
                        // 提示错误
                        alert("账号 或 密码 有误!")
                        signal = null;
                    }
            })
        }
    }
    //-----------------------注销账号-------------------
    document.getElementById("remove_btn").onclick = function (){

        // 获取用户输入
        var input_userName = document.getElementById("usernameIn").value + "";
        var input_passWord = document.getElementById("passwordIn").value + "";

        if("" == input_userName || "" == input_passWord){
            // 输入错误弹出提示信息
            alert("输入有误！")
        }else {
            // 绑定user
            user.userName = input_userName;
            user.passWord = input_passWord;
            // 进行登录
            axios({
                method: "post",
                url: "http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/remove_user_Servlet",
                // url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/remove_user_Servlet",
                data: user
            }).then(function (resp) {
                if (resp.data == "yes") {
                    alert("注销成功")
                } else {
                    alert("注册失败！ 用户不存在！")
                }
            })
        }

    }



</script>
</body>
</html>
